<template>
  <!-- 个人中心模块 -->
  <view class="new-users copy-data" :style="{ height: pageHeight }">
    <!-- 自定义顶部背景颜色 -->
    <view class="top" :style="colorStyle">
      <!-- #ifdef MP || APP-PLUS -->
      <view class="sys-head">
        <view class="sys-bar" :style="{ height: sysHeight }"></view>
        <!-- #ifdef MP -->
        <view class="sys-title" :style="member_style == 3 ? 'color:#333' : ''">个人中心</view>
        <!-- #endif -->
        <view class="bg" :style="member_style == 3 ? 'background:#f5f5f5' : ''"></view>
      </view>
      <!-- #endif -->
    </view>
    <!-- 自定义顶部背景颜色 -->
    <view class="mid style-add" :style="colorStyle">
      <scroll-view scroll-y="true" class="height-add">
        <view class="head">
          <view class="user-card unBg">
            <view class="user-info">
              <view>
                <!-- #ifdef H5 -->
                <button class="bntImg" v-if="userInfo.is_complete == 0 && isWeixin && !isLogin" @click="getWechatuserinfo">
                  <image class="avatar" src="/static/images/f.png"></image>
                  <view class="avatarName">获取头像</view>
                </button>
                <!-- #endif -->
                <!-- #ifndef APP-PLUS -->
                <view class="avatar-box" :class="{ on: userInfo.is_money_level }">
                  <image class="avatar" :src="userInfo.avatar" v-if="userInfo.avatar" @click="goEdit()"> </image>
                  <image v-else class="avatar" src="/static/images/f.png" mode="" @click="goEdit()"> </image>
                  <view class="headwear" v-if="userInfo.is_money_level && stu">
                    <image src="/static/images/headwear.png"></image>
                  </view>
                </view>
                <!-- #endif -->
              </view>
              <view class="info">
                <view class="name display-add" v-if="!userInfo.uid" @click="openAuto"> 请点击授权 </view>
                <view class="name" v-if="userInfo.uid">
                  <view class="nickname line1">{{ userInfo.nickname }}</view>
                  <image class="live" :src="userInfo.vip_icon" v-if="parseInt(userInfo.vip_id)"> </image>
                  <view class="vip" v-if="userInfo.is_money_level > 0 && stu">
                    <image src="/static/images/svip.png"></image>
                  </view>
                </view>
                <view class="num" v-if="userInfo.phone">
                  <view class="num-txt">{{ userInfo.phone }}</view>
                </view>
                <view class="phone" v-if="!userInfo.phone && isLogin && userInfo.uid" @tap="bindPhone"> 绑定手机号</view>
              </view>
              <view class="message">
                <view @click="intoPage('/pages/users/user_set/index')">
                  <view class="iconfont icon-shezhi"></view>
                </view>
              </view>
              <view class="message">
                <view @click="intoPage('/pages/users/message_center/index')">
                  <uni-badge class="uni-badge-left-margin" :text="userInfo.service_num >= 100 ? '99+' : userInfo.service_num" absolute="rightTop">
                    <view class="iconfont icon-s-kefu"></view>
                  </uni-badge>
                </view>
              </view>
            </view>
          </view>
          <view class="card-vip" v-if="userInfo.role !== '0' && userInfo.role !== '1'">
            <view class="left-box">
              <view class="big">VIP中介可享多项权益</view>
              <view v-if="userInfo.vip_status == 1" class="small">永久</view>
              <view v-else-if="userInfo.vip_status == 3" class="small"
                >会员到期
                {{ userInfo.overdue_time | dateFormat }}
              </view>
              <view v-else-if="userInfo.vip_status == -1" class="small">已过期</view>
              <view v-else-if="userInfo.vip_status == 2" class="small">{{ userInfo.user_audit == 1 ? '审核已通过' : '平台正在审核中' }}</view>
            </view>
            <navigator v-if="userInfo.vip_status == 1" url="/pages/annex/vip_paid/index" hover-class="none" class="btn"> 查看VIP中介权益</navigator>
            <navigator v-else url="/pages/annex/vip_paid/index" hover-class="none" class="btn">
              {{ userInfo.overdue_time ? '立即续费' : userInfo.user_audit == 1 ? '立即前往开通' : '查看我的权益' }}
            </navigator>
          </view>
          <view class="erweima" v-if="userInfo.urlCode">
            <image class="avatar" :src="`${imgHost}/statics/images/erweima.jpg`"></image>
            <view class="name">天选之址</view>
          </view>
        </view>
        <!-- 会员菜单二列表 -->
        <view class="menus-list" v-if="menu_status == 2 && MyMenus.length">
          <view class="title">我的服务</view>
          <!-- #ifdef APP-PLUS || H5 -->
          <block v-for="(item, index) in MyMenus" :key="index">
            <view class="item acea-row row-between-wrapper" v-if="item.url != '#' && item.url != '/pages/service/index'" @click="goMenuPage(item.url, item.name)">
              <image :src="item.pic[0]"></image>
              <view class="text acea-row row-between-wrapper">
                <view>{{ item.name }}</view>
                <view class="iconfont icon-xiangyou"></view>
              </view>
            </view>
          </block>
          <!-- #endif -->
          <!-- #ifdef MP -->
          <block v-for="(item, index) in MyMenus" :key="index">
            <view
              class="item acea-row row-between-wrapper"
              v-if="
                (item.url != '#' && item.url != '/pages/service/index' && item.url != '/pages/extension/customer_list/chat') ||
                (item.url == '/pages/extension/customer_list/chat' && routineContact == 0)
              "
              @click="goMenuPage(item.url, item.name)"
            >
              <image :src="item.pic[0]"></image>
              <view class="text acea-row row-between-wrapper">
                <view>{{ item.name }}</view>
                <view class="iconfont icon-xiangyou"></view>
              </view>
            </view>
          </block>
          <button class="item acea-row row-between-wrapper" open-type="contact" v-if="routineContact == 1">
            <image src="/static/images/contact.png"></image>
            <view class="text acea-row row-between-wrapper">
              <view>联系客服</view>
              <view class="iconfont icon-xiangyou"></view>
            </view>
          </button>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <view class="item acea-row row-between-wrapper" hover-class="none" @click="goMenuPage('/pages/users/privacy/index')">
            <image src="/static/images/menu.png"></image>
            <view class="text acea-row row-between-wrapper">
              <view>隐私协议</view>
              <view class="iconfont icon-xiangyou"></view>
            </view>
          </view>
          <!-- #endif -->
        </view>

        <!-- 会员菜单一宫格 -->
        <view class="user-menus" v-if="menu_status == 1 && MyMenus.length">
          <view class="menu-title">我的服务</view>
          <view class="list-box">
            <!-- #ifdef APP-PLUS || H5 -->
            <block v-for="(item, index) in MyMenus" :key="index">
              <view class="item" v-if="item.url != '#' && item.url != '/pages/service/index'" @click="goMenuPage(item.url, item.name)">
                <image :src="item.pic[0]"></image>
                <text>{{ item.name }}</text>
              </view>
            </block>
            <!-- #endif -->
            <!-- #ifdef MP -->
            <block v-for="(item, index) in MyMenus" :key="index">
              <view
                class="item"
                v-if="
                  (item.url != '#' && item.url != '/pages/service/index' && item.url != '/pages/extension/customer_list/chat') ||
                  (item.url == '/pages/extension/customer_list/chat' && routineContact == 0)
                "
                @click="goMenuPage(item.url, item.name)"
              >
                <image :src="item.pic[0]"></image>
                <text>{{ item.name }}</text>
              </view>
            </block>
            <button class="item" open-type="contact" v-if="routineContact == 1">
              <image src="/static/images/contact.png"></image>
              <text>联系客服</text>
            </button>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS -->
            <view class="item" hover-class="none" @click="goMenuPage('/pages/users/privacy/index?type=privacy')">
              <image src="/static/images/menu.png"></image>
              <text>隐私协议</text>
            </view>
            <!-- #endif -->
          </view>
        </view>
        <view class="copy_right">
          <template v-if="copyRightText">
            <view class="copyRightText">
              {{ copyRightText }}
            </view>
          </template>
        </view>
        <view class="uni-p-b-98"></view>
      </scroll-view>
    </view>
    <view class="mark" v-if="isCode"></view>
    <pageFooter :style="colorStyle"></pageFooter>
    <view class="mark" v-show="isextension"></view>
    <ewcomerPop v-if="isComerGift" :comerGift="comerGift" @comerPop="comerPop"></ewcomerPop>
    <!-- #ifdef MP -->
    <editUserModal :isShow="editModal" @closeEdit="closeEdit" @editSuccess="editSuccess"></editUserModal>
    <!-- #endif -->
  </view>
</template>
<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
import { storeCardApi } from '@/api/store.js'
import { newcomerGift } from '@/api/new_store.js'
import { newcomerList, copyRight } from '@/api/api.js'
import { getMenuList, getUserInfo, setVisit, updateUserInfo, getRandCode, updateWechatInfo } from '@/api/user.js'
import { wechatAuthV2, silenceAuth } from '@/api/public.js'
import { toLogin } from '@/libs/login.js'
import { mapState, mapGetters } from 'vuex'
// #ifdef H5
import Auth from '@/libs/wechat'
// #endif
import { HTTP_REQUEST_URL } from '@/config/app'
const app = getApp()
import ewcomerPop from '@/components/ewcomerPop/index.vue'
import pageFooter from '@/components/pageFooter/index.vue'
import dayjs from '@/plugin/dayjs/dayjs.min.js'
import Routine from '@/libs/routine'
import colors from '@/mixins/color'
// #ifdef MP
import editUserModal from '@/components/eidtUserModal/index.vue'
// #endif
export default {
  components: {
    pageFooter,
    ewcomerPop,
    // #ifdef MP
    editUserModal
    // #endif
  },
  computed: {
    ...mapGetters({
      cartNum: 'cartNum',
      isLogin: 'isLogin'
    })
  },
  filters: {
    coundTime(val) {
      var setTime = val * 1000
      var nowTime = new Date()
      var rest = setTime - nowTime.getTime()
      var day = parseInt(rest / (60 * 60 * 24 * 1000))
      // var hour = parseInt(rest/(60*60*1000)%24) //小时
      return day + '天'
    },
    dateFormat: function (value) {
      return dayjs(value * 1000).format('YYYY-MM-DD')
    }
  },
  mixins: [colors],
  data() {
    return {
      vipStatus: 0,
      stu: false,
      storeMenu: [], // 商家管理
      orderMenu: [
        {
          img: 'icon-daifukuan',
          title: '待付款',
          url: '/pages/goods/order_list/index?status=0'
        },
        {
          img: 'icon-daifahuo',
          title: '待发货',
          url: '/pages/goods/order_list/index?status=1'
        },
        {
          img: 'icon-daishouhuo',
          title: '待收货',
          url: '/pages/goods/order_list/index?status=2'
        },
        {
          img: 'icon-daipingjia',
          title: '待评价',
          url: '/pages/goods/order_list/index?status=3'
        },
        {
          img: 'icon-a-shouhoutuikuan',
          title: '售后/退款',
          url: '/pages/users/user_return_list/index'
        }
      ],
      imgUrls: [],
      autoplay: true,
      circular: true,
      interval: 3000,
      duration: 500,
      isAuto: false, //没有授权的不会自动授权
      //isShowAuth: false, //是否隐藏授权
      orderStatusNum: {},
      userInfo: {},
      MyMenus: [],
      sysHeight: sysHeight,
      mpHeight: 0,
      showStatus: 1,
      // #ifdef H5 || MP
      pageHeight: '100%',
      routineContact: 0,
      // #endif
      // #ifdef APP-PLUS
      pageHeight: app.globalData.windowHeight,
      // #endif
      // #ifdef H5
      isWeixin: Auth.isWeixin(),
      //#endif
      footerSee: false,
      member_style: 1,
      my_banner_status: 1,
      menu_status: 1,
      service_status: 1,
      newcomer_status: 1,
      codeList: [
        {
          name: '会员码'
        },
        {
          name: '付款码'
        }
      ],
      codeIndex: 0,
      config: {
        bar: {
          code: '',
          color: ['#000'],
          bgColor: '#FFFFFF', // 背景色
          width: 480, // 宽度
          height: 110 // 高度
        },
        qrc: {
          code: '',
          size: 380, // 二维码大小
          level: 3, //等级 0～4
          bgColor: '#FFFFFF', //二维码背景色 默认白色
          border: {
            color: ['#eee', '#eee'], //边框颜色支持渐变色
            lineWidth: 3 //边框宽度
          },
          // img: '/static/logo.png', //图片
          // iconSize: 40, //二维码图标的大小
          color: ['#333', '#333'] //边框颜色支持渐变色
        }
      },
      isCode: false,
      isextension: false,
      extension: {
        code: '',
        size: 380, // 二维码大小
        level: 3, //等级 0～4
        bgColor: '#FFFFFF', //二维码背景色 默认白色
        border: {
          color: ['#eee', '#eee'], //边框颜色支持渐变色
          lineWidth: 3 //边框宽度
        },
        // img: '/static/logo.png', //图片
        // iconSize: 40, //二维码图标的大小
        color: ['#333', '#333'] //边框颜色支持渐变色
      },
      imgHost: HTTP_REQUEST_URL,
      copyRightText: '',
      copyRightImg: '',
      giftPic: '',
      vip_type: 1,
      newcomer_style: 1,
      newList: [],
      newBg: '',
      comerGift: {},
      isComerGift: false,
      memberStatus: 0,
      editModal: false // 编辑头像信息
    }
  },
  created() {
    let that = this
    // #ifdef MP
    // 小程序静默授权
    if (!this.$store.getters.isLogin) {
    }
    // #endif
    if (that.isLogin == false) {
      // #ifdef H5 || APP-PLUS
      toLogin()
      // #endif
    }
    // #ifdef APP-PLUS
    that.$set(that, 'pageHeight', app.globalData.windowHeight)
    // #endif
  },
  async onLoad(option) {
    this.spid = option.spid ? option.spid : app.globalData.spid || uni.getStorageSync('spid')
    if (this.isLogin) {
      this.getNewcomerGift()
    }
    // #ifdef H5
    if (this.isLogin && Auth.isWeixin() && option.code) {
      try {
        let res = await updateWechatInfo({
          code: option.code
        })
        this.userInfo.nickname = res.data.nickname
        this.userInfo.avatar = res.data.avatar
        this.userInfo.is_complete = 1
      } catch (e) {}
    }
    // #endif
    this.colorData()
    let giftList = [
      this.imgHost + '/statics/images/gift01.png',
      this.imgHost + '/statics/images/gift02.png',
      this.imgHost + '/statics/images/gift03.png',
      this.imgHost + '/statics/images/gift04.png',
      this.imgHost + '/statics/images/gift05.png',
      this.imgHost + '/statics/images/gift06.png'
    ]
    let newBg = [
      this.imgHost + '/statics/images/blue-bg.png',
      this.imgHost + '/statics/images/green-bg.png',
      this.imgHost + '/statics/images/red-bg.png',
      this.imgHost + '/statics/images/pink-bg.png',
      this.imgHost + '/statics/images/orange-bg.png',
      this.imgHost + '/statics/images/gold-bg.png'
    ]
    setTimeout(() => {
      switch (this.colorNum) {
        case 1:
          this.giftPic = giftList[2]
          this.newBg = newBg[0]
          break
        case 2:
          this.giftPic = giftList[1]
          this.newBg = newBg[1]
          break
        case 3:
          this.giftPic = giftList[4]
          this.newBg = newBg[2]
          break
        case 4:
          this.giftPic = giftList[0]
          this.newBg = newBg[3]
          break
        case 5:
          this.giftPic = giftList[3]
          this.newBg = newBg[4]
          break
        case 6:
          this.giftPic = giftList[5]
          this.newBg = newBg[5]
          break
        default:
          this.giftPic = giftList[4]
          this.newBg = newBg[2]
          break
      }
    }, 1)
  },
  onReady() {
    let self = this
    // #ifdef MP
    let info = uni.createSelectorQuery().select('.sys-head')
    info
      .boundingClientRect(function (data) {
        //data - 各种参数
        self.mpHeight = data.height
      })
      .exec()
    // #endif
  },
  onShow: function () {
    this.getNewList()
    if (this.cartNum > 0) {
      uni.setTabBarBadge({
        index: 3,
        text: this.cartNum > 99 ? '99+' : this.cartNum + ''
      })
    } else {
      uni.hideTabBarRedDot({
        index: 3
      })
    }
    this.copyRightText = uni.getStorageSync('copyNameInfo')
    this.copyRightImg = uni.getStorageSync('copyImageInfo')
    uni.removeStorageSync('form_type_cart')
    if (!this.copyRightText) {
      this.getCopyRight()
    }
    let that = this
    // #ifdef APP-PLUS
    uni.getSystemInfo({
      success: function (res) {
        that.pageHeight = res.windowHeight + 'px'
      }
    })
    // #endif
    if (that.isLogin) {
      this.getUserInfo()
      this.getMyMenus()
      this.setVisit()
    }
  },
  methods: {
    // #ifdef MP
    editSuccess() {
      this.editModal = false
      this.getUserInfo()
    },
    closeEdit() {
      this.editModal = false
    },
    // #endif
    getCopyRight() {
      copyRight()
        .then((res) => {
          let data = res.data
          if (!data.copyrightContext && !data.copyrightImage) {
            data.copyrightImage = '/static/images/support.png'
          }
          uni.setStorageSync('copyNameInfo', data.copyrightContext)
          uni.setStorageSync('copyImageInfo', data.copyrightImage)
          this.copyRightText = data.copyrightContext
          this.copyRightImg = data.copyrightImage
        })
        .catch((err) => {
          return this.$util.Tips({
            title: err.msg
          })
        })
    },
    // 查看订单
    intoPage(url) {
      if (this.isLogin) {
        uni.navigateTo({
          url: url
        })
      } else {
        toLogin()
      }
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/goods_details/index?id=${item.id}&fromPage='newVip'`
      })
    },
    comerPop() {
      this.isComerGift = false
    },
    getNewcomerGift() {
      if (uni.getStorageSync('newcomerGift')) {
        return (this.isComerGift = false)
      }
      newcomerGift()
        .then((res) => {
          this.comerGift = res.data
          if (Object.prototype.toString.call(this.comerGift) == '[object Object]') {
            if (res.data.coupon_count || res.data.product_count || res.data.register_give_money || res.data.first_order_discount || res.data.register_give_integral) {
              uni.setStorageSync('newcomerGift', true)
              this.isComerGift = true
            }
          }
        })
        .catch((err) => {
          return this.$util.Tips({
            title: err
          })
        })
    },
    getNewList() {
      newcomerList({
        page: 1,
        limit: 6,
        priceOrder: '',
        salesOrder: ''
      })
        .then((res) => {
          this.newList = res.data
        })
        .catch((err) => {
          return this.$util.Tips({
            title: err
          })
        })
    },
    hah() {
      let that = this
      // #ifdef H5
      var canvas = document.getElementById('hah').getElementsByTagName('canvas')
      var imgURL = canvas[0].toDataURL('image/png')
      var dlLink = document.createElement('a')
      dlLink.download = '店员推广码'
      dlLink.href = imgURL
      dlLink.dataset.downloadurl = ['image/png', dlLink.download, dlLink.href].join(':')

      document.body.appendChild(dlLink)
      dlLink.click()
      document.body.removeChild(dlLink)
      // #endif

      // #ifdef APP-PLUS
      uni.canvasToTempFilePath({
        canvasId: 'WQrcode',
        success: (res) => {
          uni.hideLoading()
          // 保存当前绘制推广码
          that.savePic(res.tempFilePath)
        },
        fail: function (err) {
          console.log(err, '推广码生成失败')
        }
      })
      // #endif
    },
    //保存推广码到本地
    savePic(filePath) {
      // #ifdef APP-PLUS
      uni.showLoading({
        title: '正在保存'
      })
      uni.saveImageToPhotosAlbum({
        filePath: filePath,
        success: function () {
          uni.showToast({
            title: '推广码保存成功～'
          })
        },
        fail: function (e) {
          console.log(e, '推广码保存失败')
        },
        complete: function () {
          uni.hideLoading()
        }
      })
      // #endif
    },
    hello(res) {},
    // 前往新人专享
    goNewcomers() {
      uni.navigateTo({
        url: '/pages/store/newcomers/index'
      })
    },

    getCode() {
      getRandCode()
        .then((res) => {
          let code = res.data.code
          this.config.bar.code = code
          this.config.qrc.code = code
        })
        .catch((err) => {
          return this.$util.Tips(err)
        })
    },
    closeCode() {
      this.isCode = false
      this.isextension = false
    },
    tapCode(index) {
      this.codeIndex = index
      if (index == 1) {
        this.getCode()
      } else {
        let code = this.userInfo.bar_code
        this.config.bar.code = code
        this.config.qrc.code = code
      }
    },
    getWechatuserinfo() {
      //#ifdef H5
      Auth.isWeixin() && Auth.toAuth('snsapi_userinfo', '/pages/user/index')
      //#endif
    },
    getRoutineUserInfo(e) {
      updateUserInfo({
        userInfo: e.detail.userInfo
      })
        .then((res) => {
          this.getUserInfo()
          return this.$util.Tips('更新用户信息成功')
        })
        .catch((err) => {
          return this.$util.Tips(err)
        })
    },
    // 记录会员访问
    setVisit() {
      setVisit({
        url: '/pages/user/index'
      }).then((res) => {})
    },
    // 打开授权
    openAuto() {
      toLogin()
    },
    // 授权回调
    onLoadFun(e) {
      this.getUserInfo(e)
      this.getMyMenus()
      this.setVisit()
      this.isShowAuth = false
    },
    Setting: function () {
      uni.openSetting({
        success: function (res) {}
      })
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e
    },
    // 绑定手机
    bindPhone() {
      uni.navigateTo({
        url: '/pages/users/user_phone/index'
      })
    },
    /**
     * 获取个人用户信息
     */
    getUserInfo: function () {
      let that = this
      getUserInfo().then((res) => {
        console.log('>>>>>>>>>>获取个人用户信息', res.data)
        console.log('>>>>>>>>>>获取个人用户信息', res.data.outUserData)
        that.userInfo = res.data

        if (res.data.storeUserMobile) {
          if (res.data.phone == '') {
            uni.navigateTo({
              url: '/pages/users/user_phone/index'
            })
          }
        }

        that.stu = res.data.svip_open
        that.memberStatus = parseInt(res.data.member_func_status)
        that.vipStatus = res.data.vip_status
        that.$store.commit('SETUID', res.data.uid)
        that.$store.commit('UPDATE_USERINFO', res.data)
        that.orderMenu.forEach((item, index) => {
          switch (item.title) {
            case '待付款':
              item.num = res.data.orderStatusNum.unpaid_count
              break
            case '待发货':
              item.num = res.data.orderStatusNum.unshipped_count
              break
            case '待收货':
              item.num = res.data.orderStatusNum.received_count
              break
            case '待评价':
              item.num = res.data.orderStatusNum.evaluated_count
              break
            case '售后/退款':
              item.num = res.data.orderStatusNum.refunding_count
              break
          }
        })
      })
    },
    //小程序授权api替换 getUserInfo
    getUserProfile() {
      uni.showLoading({
        title: '获取中'
      })
      let self = this
      Routine.getUserProfile()
        .then((res) => {
          Routine.getCode()
            .then((code) => {
              let userInfo = res.userInfo
              userInfo.code = code
              userInfo.spread_spid = app.globalData.spid //获取推广人ID
              userInfo.spread_code = app.globalData.code //获取推广人分享二维码ID
              Routine.authUserInfo(userInfo)
                .then((res) => {
                  if (res.data.key !== undefined && res.data.key) {
                    uni.hideLoading()
                    self.authKey = res.data.key
                    self.isPhoneBox = true
                  } else {
                    uni.hideLoading()
                    let time = res.data.expires_time - self.$Cache.time()
                    self.$store.commit('LOGIN', {
                      token: res.data.token,
                      time: time
                    })
                    this.getUserInfo()
                  }
                })
                .catch((res) => {
                  uni.hideLoading()
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                  })
                })
            })
            .catch((res) => {
              uni.hideLoading()
            })
        })
        .catch((res) => {
          uni.hideLoading()
        })
    },
    /**
     *
     * 获取个人中心图标
     */
    switchTab(order) {
      this.orderMenu.forEach((item, index) => {
        switch (item.title) {
          case '待付款':
            item.img = order.dfk
            break
          case '待发货':
            item.img = order.dfh
            break
          case '待收货':
            item.img = order.dsh
            break
          case '待评价':
            item.img = order.dpj
            break
          case '售后/退款':
            item.img = order.sh
            break
        }
      })
    },
    getMyMenus: function () {
      let that = this
      getMenuList().then((res) => {
        let storeMenu = []
        let myMenu = []
        res.data.routine_my_menus.forEach((el, index, arr) => {
          if (el.type == '2') {
            storeMenu.push(el)
          } else {
            myMenu.push(el)
          }
        })
        this.member_style = Number(res.data.diy_data.status)
        this.my_banner_status = res.data.diy_data.my_banner_status
        this.menu_status = res.data.diy_data.menu_status
        this.service_status = res.data.diy_data.service_status
        this.vip_type = res.data.diy_data.vip_type
        this.newcomer_style = res.data.diy_data.newcomer_style
        this.newcomer_status = res.data.diy_data.newcomer_status
        let order01 = {
          dfk: 'icon-daifukuan',
          dfh: 'icon-daifahuo',
          dsh: 'icon-daishouhuo',
          dpj: 'icon-daipingjia',
          sh: 'icon-a-shouhoutuikuan'
        }
        let order02 = {
          dfk: 'icon-daifukuan-lan',
          dfh: 'icon-daifahuo-lan',
          dsh: 'icon-daishouhuo-lan',
          dpj: 'icon-daipingjia-lan',
          sh: 'icon-shouhou-tuikuan-lan'
        }
        let order03 = {
          dfk: 'icon-daifukuan-ju',
          dfh: 'icon-daifahuo-ju',
          dsh: 'icon-daishouhuo-ju',
          dpj: 'icon-daipingjia-ju',
          sh: 'icon-shouhou-tuikuan-ju'
        }
        let order04 = {
          dfk: 'icon-daifukuan-fen',
          dfh: 'icon-daifahuo-fen',
          dsh: 'icon-daishouhuo-fen',
          dpj: 'icon-daipingjia-fen',
          sh: 'icon-a-shouhoutuikuan-fen'
        }
        let order05 = {
          dfk: 'icon-daifukuan-lv',
          dfh: 'icon-daifahuo-lv',
          dsh: 'icon-daishouhuo-lv',
          dpj: 'icon-daipingjia-lv',
          sh: 'icon-shouhou-tuikuan-lv'
        }
        switch (res.data.diy_data.order_status) {
          case 1:
            this.switchTab(order01)
            break
          case 2:
            this.switchTab(order02)
            break
          case 3:
            this.switchTab(order03)
            break
          case 4:
            this.switchTab(order04)
            break
          case 5:
            this.switchTab(order05)
            break
        }
        that.$set(that, 'MyMenus', myMenu)
        that.$set(that, 'storeMenu', storeMenu)
        this.imgUrls = res.data.routine_my_banner
        this.routineContact = Number(res.data.routine_contact_type)
      })
    },
    // 编辑页面
    goEdit() {
      if (this.isLogin == false || !this.userInfo.uid) {
        toLogin()
      } else {
        // #ifdef MP
        if (this.userInfo.is_default_avatar) {
          this.editModal = true
          return
        }
        // #endif
        uni.navigateTo({
          url: '/pages/users/user_set/index'
        })
      }
    },
    // 签到
    goSignIn() {
      uni.navigateTo({
        url: '/pages/users/user_sgin/index'
      })
    },
    goMenuPage(url, name) {
      if (this.isLogin) {
        let arr = url.split('@APPID=')
        if (arr.length > 1) {
          //#ifdef MP
          uni.navigateToMiniProgram({
            appId: arr[arr.length - 1], // 此为生活缴费appid
            path: arr[0], // 此为生活缴费首页路径
            envVersion: 'release',
            success: (res) => {
              console.log('打开成功', res)
            },
            fail: (err) => {
              console.log('sgdhgf', err)
            }
          })
          //#endif
          //#ifndef MP
          this.Tips({
            title: 'h5与app端不支持跳转外部小程序'
          })
          //#endif
        } else {
          if (url == '/pages/extension/customer_list/chat') {
            this.$util.getCustomer(this.userInfo)
          } else {
            if (url.indexOf('http') === -1) {
              // #ifdef H5
              if (name && name === '订单核销') {
                return (window.location.href = `${location.origin}${url}`)
              }
              // #endif
              // #ifdef MP
              if (url != '#' && url == '/pages/users/user_set/index') {
                uni.openSetting({
                  success: function (res) {}
                })
              }
              // #endif
              if (url == '/pages/store_spread/index') {
                storeCardApi()
                  .then((res) => {
                    this.isextension = true
                    this.$nextTick(function () {
                      this.extension.code = res.data.url
                    })
                  })
                  .catch((err) => {
                    uni.hideLoading()
                    this.$util.Tips({
                      title: err
                    })
                  })
              }

              if (
                ['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index', '/pages/store_cate/store_cate', '/pages/index/index'].indexOf(
                  url.split('?')[0]
                ) == -1
              ) {
                console.log('+++')
                if (url == '/pages/extension/invite_friend/index') {
                  uni.navigateTo({
                    url: url + `?uid=${this.userInfo.uid}`
                  })
                } else {
                  uni.navigateTo({
                    url: url
                  })
                }
              } else {
                uni.reLaunch({
                  url: url
                })
              }
            } else {
              uni.navigateTo({
                url: `/pages/annex/web_view/index?url=${url}`
              })
            }
          }
        }
      } else {
        this.openAuto()
      }
    }
  }
}
</script>

<style lang="scss">
.style-add {
  flex: 1;
  overflow: hidden;
}

.height-add {
  height: 100%;
}

.display-add {
  height: 100%;
  display: flex;
  align-items: center;
}

page,
body {
  height: 100%;
}

.heg {
  height: 670rpx !important;
}

.mark {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
}

.height {
  margin-top: -84rpx !important;
}

.menus-list {
  width: 690rpx;
  background-color: #fff;
  border-radius: 14rpx;
  margin: 25rpx auto 0 auto;

  .title {
    font-weight: 600;
    font-size: 30rpx;
    color: #333;
    padding: 30rpx 30rpx 10rpx 30rpx;
  }

  .item {
    margin-left: 30rpx;
    font-size: 30rpx;
    color: #333;

    image {
      width: 42rpx;
      height: 42rpx;
      display: block;
    }

    .text {
      width: 590rpx;
      border-bottom: 1rpx solid #eeeeee;
      padding: 28rpx 30rpx 28rpx 0;

      .iconfont {
        font-size: 20rpx;
        color: #8a8a8a;
      }
    }

    &:last-child {
      .text {
        border-bottom: 0rpx solid #eeeeee;
      }
    }
  }
}

.erweima {
  width: 690rpx;
  background: #ffffff;
  margin: auto;
  border-radius: 0 0 16rpx 16rpx;
  padding: 30rpx;
  text-align: center;
  image {
    width: 250rpx;
    height: 250rpx;
    vertical-align: middle;
    margin: auto;
  }
  .name {
    font-size: 32rpx;
    font-weight: bold;
    padding-top: 20rpx;
  }
}

.num-wrapper {
  background-color: #fff;
  z-index: 29;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  margin: 0rpx 30rpx;
  border-radius: 16rpx 16rpx 0 0;
  height: 160rpx;

  &.on {
    height: 128rpx;
    margin-top: -68rpx;

    .gift {
      color: var(--view-theme);
      margin-left: 10rpx;
      font-weight: bold;
    }
  }

  .img {
    margin-left: 38rpx;
    width: 76rpx;
    height: 68rpx;
  }

  .text {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    margin-left: -60rpx;
  }

  .btn-login {
    width: 144rpx;
    height: 56rpx;
    // background: linear-gradient(270deg, #FF7931 0%, #E93323 100%);
    background-color: var(--view-theme);
    border-radius: 28rpx;
    text-align: center;
    line-height: 56rpx;
    margin-right: 32rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
  }

  .num-item {
    width: 33.33%;
    text-align: center;

    & ~ .num-item {
      position: relative;

      &:before {
        content: '';
        position: absolute;
        width: 1rpx;
        height: 28rpx;
        top: 50%;
        margin-top: -14rpx;
        background-color: rgba(255, 255, 255, 0.4);
        left: 0;
      }
    }

    .num {
      font-size: 36rpx;
      font-weight: bold;
    }

    .txt {
      margin-top: 8rpx;
      font-size: 26rpx;
      color: #555;
    }

    &.on {
      background-image: linear-gradient(45deg, var(--view-theme), var(--view-bntColor), var(--view-theme), var(--view-bntColor), var(--view-theme));
      background-size: 400%;
      animation: bganimation 15s infinite;
      padding: 10rpx 0;
      border-radius: 30rpx;
      color: #ffffff;
    }

    @keyframes bganimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
  }
}

// 新人专享
.newcomersCon {
  background-color: var(--view-theme);
  width: 690rpx;
  height: 296rpx;
  margin: 0 30rpx;
  border-radius: 16rpx;

  &.on {
    background-color: #fff;

    .newcomers {
      .title {
        .tl {
          color: #333;
        }

        .tr {
          width: unset;
          color: #666666;
          background: unset;
        }
      }

      .scroll {
        .scroll-item {
          background-color: var(--view-minorColorT);
        }
      }
    }
  }

  .newcomers {
    padding: 24rpx 30rpx;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .title {
      display: flex;
      justify-content: space-between;

      .tl {
        font-size: 30rpx;
        font-weight: 600;
        color: #ffffff;
      }

      .tr {
        width: 90rpx;
        height: 36rpx;
        background: linear-gradient(135deg, #ffca52 0%, #fe960f 100%);
        border-radius: 18rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 36rpx;
        font-weight: 400;
        color: #ffffff;

        .icon-xiangyou {
          font-size: 20rpx;
        }
      }
    }

    .scroll {
      // width: 690rpx;
      margin-top: 20rpx;
      white-space: nowrap;

      // padding-right: 60rpx;
      .scroll-item {
        display: inline-block;
        width: 162rpx;
        height: 194rpx;
        background-color: #fff;
        border-radius: 12rpx;
        margin-right: 10rpx;
        padding: 12rpx;

        .pictrue {
          width: 138rpx;
          height: 138rpx;
          position: relative;

          image {
            width: 100%;
            height: 100%;
          }

          .label {
            width: 98rpx;
            height: 32rpx;
            background: var(--view-theme);
            border-radius: 16rpx;
            color: #ffffff;
            font-size: 24rpx;
            text-align: center;
            line-height: 32rpx;
            position: absolute;
            bottom: 2rpx;
            left: 50%;
            margin-left: -49rpx;
          }
        }

        .money {
          font-size: 24rpx;
          color: var(--view-priceColor);
          margin-top: 6rpx;
        }
      }
    }
  }
}

.Tnum-wrapper {
  margin: -34rpx 30rpx 25rpx 30rpx;
}

.unNum-wrapper {
  margin: 0 auto;
  width: 690rpx;
}

.unBg {
  background-color: unset !important;

  .user-info {
    .info {
      .name {
        color: #333333 !important;
        font-weight: 600;
      }

      .num {
        color: #333 !important;

        .num-txt {
          height: 38rpx;
          background-color: rgba(51, 51, 51, 0.13);
          padding: 0 12rpx;
          border-radius: 16rpx;
        }
      }
    }
  }

  .qrCode {
    color: #333 !important;
  }

  .message {
    .iconfont {
      color: #333 !important;
    }

    .num {
      color: #fff !important;
      background-color: var(--view-theme) !important;
    }
  }

  .setting {
    .iconfont {
      color: #333 !important;
    }
  }
}

.cardVipB {
  background-color: #343a48;
  width: 100%;
  height: 124rpx;
  border-radius: 16rpx 16rpx 0 0;
  padding: 22rpx 30rpx 0 30rpx;
  margin-top: 16px;

  &.on {
    width: 690rpx;
    height: 130rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    padding: 26rpx 30rpx 0 90rpx;

    .iconfont {
      font-size: 24rpx;
      margin-left: 6rpx;
    }
  }

  .left-box {
    .small {
      color: #f8d5a8;
      font-size: 28rpx;
      margin-left: 18rpx;
    }

    .pictrue {
      width: 40rpx;
      height: 45rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .btn {
    color: #bbbbbb;
    font-size: 26rpx;

    &.on {
      color: #fff;
    }
  }

  .icon-xiangyou {
    margin-top: 6rpx;
  }
}

.cardVipA {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 750rpx;
  height: 84rpx;
  bottom: -2rpx;
  left: 0;
  padding: 0 56rpx 0 135rpx;

  .left-box {
    font-size: 26rpx;
    color: #905100;
    font-weight: 400;

    &.on {
      color: #fff;
    }
  }

  .btn {
    color: #905100;
    font-weight: 400;
    font-size: 24rpx;

    &.on {
      color: #fff;
    }
  }

  .iconfont {
    font-size: 20rpx;
    margin: 4rpx 0 0 4rpx;

    &.on {
      color: #fff;
      margin-top: 0;
    }
  }
}

.new-users {
  display: flex;
  flex-direction: column;
  height: 100%;

  .sys-head {
    position: relative;
    width: 100%;

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: var(--view-theme);
      background-size: 100% auto;
      background-position: left bottom;
    }

    .sys-title {
      z-index: 10;
      position: relative;
      height: 43px;
      text-align: center;
      line-height: 43px;
      font-size: 34rpx;
      color: #ffffff;
    }
  }

  .head {
    .user-card {
      position: relative;
      width: 100%;
      margin: 0 auto;
      padding: 35rpx 28rpx;
      background-size: 100% auto;
      background-color: var(--view-theme);

      .user-info {
        z-index: 20;
        position: relative;
        display: flex;

        .headwear {
          position: absolute;
          right: -4rpx;
          top: -14rpx;
          width: 44rpx;
          height: 44rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .live {
          width: 28rpx;
          height: 28rpx;
          margin-left: 14rpx;
          display: block;
        }

        .bntImg {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          text-align: center;
          line-height: 120rpx;
          background-color: unset;
          position: relative;

          .avatarName {
            font-size: 16rpx;
            color: #fff;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.6);
            height: 37rpx;
            line-height: 37rpx;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
          }
        }

        .avatar-box {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;

          &.on {
            .avatar {
              border: 2px solid #ffac65;
              border-radius: 50%;
              box-sizing: border-box;
            }
          }
        }

        .avatar {
          position: relative;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }

        .info {
          width: 346rpx;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          padding: 20rpx 0;

          .name {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 31rpx;
            width: 346rpx;

            .nickname {
              max-width: 196rpx;
              display: block;
            }

            .vip {
              margin-left: 10rpx;
              width: 78rpx;
              height: 30rpx;

              image {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }

          .num {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.6);

            image {
              width: 22rpx;
              height: 23rpx;
              margin-left: 20rpx;
            }
          }
        }
      }

      .qrCode {
        color: #fff;
        margin-top: 18rpx !important;
        font-size: 38rpx;
        margin-right: 34rpx !important;
      }

      .message {
        align-self: flex-start;
        position: relative;
        margin-top: 16rpx;
        margin-right: 30rpx;

        .uni-badge-left-margin {
          /deep/.uni-badge--error {
            background-color: #fff !important;
            color: var(--view-theme);
          }
        }

        .num {
          position: absolute;
          top: -8rpx;
          left: 18rpx;
          padding: 0 6rpx;
          height: 28rpx;
          border-radius: 12rpx;
          background-color: #fff;
          font-size: 18rpx;
          line-height: 28rpx;
          text-align: center;
          color: var(--view-theme);
        }

        .iconfont {
          font-size: 40rpx;
          color: #fff;
        }
      }

      .sign {
        z-index: 200;
        position: absolute;
        right: -12rpx;
        top: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 60rpx;
        background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
        border-radius: 29rpx 4rpx 4rpx 29rpx;
        color: #282828;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .order-wrapper {
      background: #fff;
      margin: 0 30rpx;
      border-radius: 16rpx;
      position: relative;

      .order-hd {
        justify-content: space-between;
        padding: 30rpx 20rpx 10rpx;
        margin-top: 25rpx;
        font-size: 30rpx;
        color: #282828;

        .left {
          font-weight: bold;
        }

        .right {
          align-items: center;
          color: #666666;
          font-size: 26rpx;

          .icon-xiangyou {
            margin-left: 5rpx;
            margin-top: 6rpx;
            font-size: 26rpx;
          }
        }
      }

      .order-bd {
        display: flex;
        padding: 0 0;

        .order-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 20%;
          height: 140rpx;

          .pic {
            position: relative;
            text-align: center;

            .iconfont {
              font-size: 48rpx;
              color: var(--view-theme);
            }

            image {
              width: 58rpx;
              height: 48rpx;
            }

            .uni-badge-left-margin {
              position: absolute;
              // #ifdef MP
              top: -22rpx;

              // #endif
              /deep/.uni-badge--error {
                background-color: #fff !important;
              }

              /deep/.uni-badge {
                color: var(--view-theme);
                border: 1px solid var(--view-theme);
                z-index: 29;
              }
            }
          }

          .txt {
            margin-top: 6rpx;
            font-size: 26rpx;
            color: #454545;
          }
        }
      }
    }
  }

  .slider-wrapper {
    margin: 20rpx 30rpx;
    height: 130rpx;

    swiper,
    swiper-item {
      height: 100%;
    }

    image {
      width: 100%;
      height: 130rpx;
      border-radius: 16rpx;
    }
  }

  .user-menus {
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16rpx;

    .menu-title {
      padding: 30rpx 30rpx 40rpx;
      font-size: 30rpx;
      color: #282828;
      font-weight: bold;
    }

    .list-box {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }

    .item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      width: 25%;
      margin-bottom: 47rpx;
      font-size: 26rpx;
      color: #333333;

      image {
        width: 52rpx;
        height: 52rpx;
        margin-bottom: 18rpx;
      }

      &:last-child::before {
        display: none;
      }
    }

    button {
      font-size: 28rpx;
    }
  }

  .phone {
    color: #fff;
    background-color: #ccc;
    border-radius: 15px;
    width: max-content;
    padding: 2px 10px;
    font-size: 20rpx;
    margin-top: 4px;
  }

  .order-status-num {
    min-width: 12rpx;
    background-color: #fff;
    color: var(--view-theme);
    border-radius: 15px;
    position: absolute;
    right: -14rpx;
    top: -15rpx;
    font-size: 20rpx;
    padding: 0 8rpx;
    border: 1px solid var(--view-theme);
  }

  .support {
    width: 219rpx;
    height: 74rpx;
    margin: 54rpx auto;
    display: block;
  }

  .copyRightImg {
    width: 219rpx;
    height: 74rpx;
    margin: 16rpx auto;
    display: block;
  }

  .copy_right {
    text-align: center;
    color: #ccc;
    font-size: 22rpx;
    margin-top: 40rpx;

    .copyRightText {
      margin-top: 0rpx;
      color: #ccc;
      font-size: 20rpx;
      margin-bottom: 20rpx;
    }
  }
}

.card-vip {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 690rpx;
  height: 120rpx;
  margin: 0 auto 0;
  background: url('~@/static/images/user_vip.png');
  background-size: cover;
  padding: 28rpx 30rpx 0 92rpx;

  &.on {
    .left-box {
      color: #fff;
    }

    .btn {
      color: #fff;
    }

    .iconfont {
      color: #fff;
    }
  }

  .left-box {
    font-size: 28rpx;
    color: #ae5a2a;

    .big {
      font-size: 28rpx;
    }

    .small {
      opacity: 0.8;
    }
  }

  .btn {
    color: #ae5a2a;
    font-weight: 400;
    font-size: 26rpx;
  }

  .iconfont {
    font-size: 20rpx;
    margin: 4rpx 0 0 4rpx;
    color: #ae5a2a;
  }
}

.setting {
  margin-top: 15rpx;
  margin-left: 15rpx;
  color: #fff;

  .iconfont {
    font-size: 40rpx;
  }
}

.new-users {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
